<template>
    <div id="x6Container" class="x6Container">
        <WorkSpace :handleCancel="handleCancel" :handleSave="handleSave" v-model:data="jsonData"></WorkSpace>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import RPAApi from '../../../apis/rpa'
import { Graph } from '@antv/x6';
import { Stencil } from "@antv/x6-plugin-stencil";
import WorkSpace from './X6WorkFlowDesign/X6WorkSpace.vue';

const router = useRouter();
const route = useRoute();

const jsonData = ref({});

const props = defineProps({
    
})

onMounted(()=>{
    loadData();
})

const loadData = () => {
    const id:string = route.params.id as string;
    RPAApi.fetchTaskById(parseInt(id)).then(ret=>{
        if(ret.code == 0){
            console.log('[EditRPATaskFlow] fetchTaskById', ret);
            jsonData.value = JSON.parse(ret.data.taskData);
        }else{
            ElMessage({
                type:"error",
                message: ret.message
            })
        }
    }).catch(err=>{
        ElMessage({
            type:"error",
            message: err
        })
    })
}

const handleCancel = ()=>{
    router.back();
}

const handleSave = (jsonData:any)=>{
    console.log("[EditRPATaskFlow] save", jsonData);
    let cells = jsonData.cells;
    const filterCells = cells.filter((item:any)=> item.shape != 'edge');
    let costPoint = filterCells.length;
    console.log('costPoint', costPoint);
    const id:string = route.params.id as string;
    RPAApi.updateTaskData(parseInt(id), JSON.stringify(jsonData, null, 2), costPoint).then(ret=>{
        if(ret.code == 0){
            ElMessage({
                type:"success",
                message: "保存成功"
            })
        }else{
            ElMessage({
                type:"error",
                message: ret.message
            })
        }
    }).catch(err=>{
        ElMessage({
            type:"error",
            message: err
        })
    });
}

</script>

<style scoped>
.x6Container{
    position: relative;
    height: 100%;
    width: 100%;
}

</style>
